@import './var';
// reset

@each $colorKey, $color in $colors {
	.text-#{$colorKey} {
		color: $color;
	}
	.bg-#{$colorKey} {
		background-color: $color;
	}
}

// text align
@each $var in (left, center, right) {
	.text-#{$var} {
		text-align: $var !important;
	}
}

@each $sizeKey, $size in $font-sizes {
	.fs-#{$sizeKey} {
		font-size: $size * $base-font-size;
	}
}

@each $flexKey, $flex in $flex-jc {
	.jc-#{$flexKey} {
		justify-content: $flex;
	}
}

@each $flexKey, $flex in $flex-ai {
	.ai-#{$flexKey} {
		align-items: $flex;
	}
}

@each $typeKey, $type in $spacing-types {
	// m-1
	@each $sizeKey, $size in $spacing-sizes {
		.#{$typeKey}-#{$sizeKey} {
			#{$type}: $size * $spacing-base-size;
		}
	}

	// mx-1, my-1
	@each $sizeKey, $size in $spacing-sizes {
		.#{$typeKey}x-#{$sizeKey} {
			#{$type}-left: $size * $spacing-base-size;
			#{$type}-right: $size * $spacing-base-size;
		}

		.#{$typeKey}y-#{$sizeKey} {
			#{$type}-top: $size * $spacing-base-size;
			#{$type}-bottom: $size * $spacing-base-size;
		}
	}

	// mt-1
	@each $directionKey, $direction in $spacing-direction {
		@each $sizeKey, $size in $spacing-sizes {
			.#{$typeKey}#{$directionKey}-#{$sizeKey} {
				#{$type}-#{$direction}: $size * $spacing-base-size;
			}
		}
	}
}

// borders
@each $dir in (top, right, left, bottom) {
	.border-#{$dir} {
		border-#{$dir}: 1px solid $border-color;
	}
}
